<!--
 * @Descripttion: 
 * @Version: 1.0
 * @Author: wangph
 * @Date: 2021-04-21 09:14:57
 * @LastEditors: wangph
 * @LastEditTime: 2021-04-27 10:15:01
-->
{extend name="$admin_layout" /}
{block name="content"}
{php}
$url_param = input('param.');
{/php}

<script src="/static/admin/js/layui/layui.js"></script>
<link rel="stylesheet" href="/static/admin/js/layui/css/layui.css">
<!-- 引入 layui.js
<link rel="stylesheet" href="http://unpkg.com/layui@2.6.4/dist/css/layui.css">
<script src="http://unpkg.com/layui@2.6.4/dist/layui.js"></script>
<script src="http://www.zbphp.com:8080/static/plugins/jquery/jquery.min.js?v=20180725"></script>
 -->
<style type="text/css">
    .must{color:#f00;}
    #search_success{
        position: absolute;
        background-color: #fefefe;
        border: 1px solid #d1d1d1;
        bottom: auto;
    }
    .amap-icon img,
    .amap-marker-content img{
        width: 25px;
        height: 34px;
    }

    .marker {
        position: absolute;
        top: -20px;
        right: -118px;
        color: #fff;
        padding: 4px 10px;
        box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
        white-space: nowrap;
        font-size: 12px;
        font-family: "";
        background-color: #25A5F7;
        border-radius: 3px;
    }
</style>
<div class="row">
	<div class="col-md-12">
		<div class="box nav-tabs-custom">
			<div class="box-header with-border">
				<h3 class="box-title">{$page_title|default=""|htmlspecialchars}</h3>
				{eq name="url_param.layer" value="1"}
				<!-- <div class="close close_crm_set_bar icon-del" onClick="closelayer()"></div> -->
				{else /}
				<button class="btn btn-default btn-flat btn-xs pull-right" type="button" onclick="javascript:history.back(-1);return false;">
					<i class="fa fa-mail-reply"></i> {:lang('返回')} </button>
				{/eq}
			</div>
			<div class="box-body tab-content">
				<div class="tab-pane active">
					{notempty name="$page_tips"}					
						<div class="alert alert-info">{$page_tips|raw}</div>					
					{/notempty}
					<div class="block-content" style="max-width: 700px;">
						{php}
						$url_param = input('param.');
						{/php} 
						<!-- 表单验证请保留id="form"，否则验证不起作用 -->
						{eq name="url_param.layer" value="1"}
						<form class="form row" parent_reload="1" name="form" id="form" onkeydown="if(event.keyCode==13){findinput();}"
							  autocomplete="on" action="{:url('',$url_param)}" method="post" data-validator-option="{timely:1, theme:'bootstrap'}">
							{else /}
							<form class="form row" parent_reload="{$url_param.reload|default = '-1'}" name="form" id="form" onkeydown="if(event.keyCode==13){findinput();}"
								  autocomplete="on" action="{:url('',$url_param)}" method="post" data-validator-option="{timely:1, theme:'bootstrap'}">
								{/eq}
							{include file="../application/admin/view/public/form.html" /}
                            
							<div class="form-group col-md-12 col-xs-12">
                                <div class="col-xs-12">
                                    <div class="item">
                                        <span class="input-group-btn ">
                                            <a type="submit" name="search" id="search-btn" class="btn add_Tbtn btn-blue btn-success">{:lang('地图选点')}</a>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-xs-12">
                            </div>

							<div class="col-xs-12">
								{neq name="btn_hide" value="1"}
								<button class="btn btn-primary " type="submit"> {:lang('提交')} </button>
								{eq name="url_param.layer" value="1"}
								<button class="btn btn-default btn-flat" type="button" onClick="closelayer()">{:lang('关闭')}</button>
								{else /}
								<button class="btn btn-default btn-flat" type="button" onClick="javascript:history.back(-1);return false;">{:lang('返回')} </button>
								{/eq}
								{/neq}
							</div>
						</form>


                        <div class="search" id="search" style="display: none;">
                            <div class="input-group" style="position: relative;">
                                <input type="text" id="place" name="" class="form-control" placeholder="{:lang('输入地点')}" value=""/>
                                <span><a type="submit" id="search_name" class="btn add_Tbtn btn-blue btn-success">{:lang('搜索')}</a></span>
                                <div id="search_success" style="width: 200px;"></div>
                            </div>
                            <div id="panel" style="width:800px;height: 400px;border: #0C0C0C solid 1px;"></div>
                            <div id="address_list" style="width: 800px;height:300px;border: #6e6e6e solid 1px;"></div>
                        </div>
                    </div>
				</div>
			</div>
		</div>
	</div>
</div>
               
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=b97fe867e61667fc6e7babbf1075388a&plugin=AMap.ToolBar,AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type='text/javascript'>
    layui.use(['layer','element'],function () {
        var layer=layui.layer,element=layui.element;
        // search-btn
        $('#search-btn').click(function(){
            var lng = 0,lat=0,address='',pname='',adname='',cityname='';
            layer.open({
                type:1,
                area: ['850px', '800px'],
                content:$('#search'),
                btn:['确认','取消'],
                yes:function(index,obj){
                    $('#place').val('');
                    $('#address_list').html('')
                    pname = pname.replace('省','').replace('省','').replace('维吾尔自治区','').replace('壮族自治区','').replace('特别行政区','').replace('回族自治区','').replace('自治区','');
                    if(parseFloat(lng) > 0){
                        var province = $('#province').children('option').each(function () {
                            if($(this).text() == pname){
                                $(this).prop('selected',true);
                            }else{
                                $(this).prop('selected',false);
                            }
                        });

                        // $('#city').html('<option value="'+cityname+'">'+cityname+'</option>');
                        // $('#district').html('<option value="'+adname+'">'+adname+'</option>');
                        $('input[name=lng]').val(lng);
                        $('input[name=lat]').val(lat);
                        $('input[name=city_name]').val(cityname);
                        $('input[name=district_name]').val(adname);
                        $('input[name=full_address]').val(address);
                    }
                    layer.close(index);
                },
                end:function(){
                    $('#place').val('');
                    $('#address_list').html('');
                },
                success:function (obj,index) {
                    var z = $('#layui-layer'+index).css('z-index');
                    $('#search_success').css('z-index',z+1);
                    var longitude = $('input[name=longitude]').val();
                    var latitude = $('input[name=latitude]').val();
                    if(parseFloat(longitude) > 0 && parseFloat(latitude) > 0){
                        var map = new AMap.Map('panel', {
                            center:[longitude,latitude],
                            zoom:18
                            // resizeEnable: true
                        });
                    }else{
                        var map = new AMap.Map('panel', {
                            zoom:18
                            // resizeEnable: true
                        });
                    }
                    if(parseFloat(longitude) > 0 && parseFloat(latitude) > 0){
                        marker = new AMap.Marker({
                            icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                            position: [longitude,latitude],
                            offset: new AMap.Pixel(-13, -30)
                        });
                        marker.setMap(map);
                        // 自定义点标记内容
                        var markerContent = document.createElement("div");

                        // 点标记中的图标
                        var markerImg = document.createElement("img");
                        markerImg.className = "markerlnglat";
                        markerImg.src = "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png";
                        markerContent.appendChild(markerImg);
                        var address_old = $('input[name=full_address]').val();
                        // 点标记中的文本

                        var markerSpan = document.createElement("span");
                        markerSpan.className = 'marker';
                        markerSpan.innerHTML = address_old;
                        markerContent.appendChild(markerSpan);

                        marker.setContent(markerContent); //更新点标记内容
                        marker.setPosition([longitude, latitude]); //更新点标记位置
                        //POI位置搜索
                    }
                    AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
                        var autocomplete= new AMap.Autocomplete({
                            // 城市，默认全国
                            // 使用联想输入的input的id
                            input: "place",
                            output:"search_success"
                        });
                        var placeSearch = new AMap.PlaceSearch({
                            pageSize: 5, // 单页显示结果条数
                            pageIndex: 1, // 页码
                            map:map,
                            citylimit: true,  //是否强制限制在设置的城市内搜索
                            panel: "address_list", // 结果列表将在此容器中进行展示。
                            autoFitView: true // 是否自动调整地图视野使绘制的
                        });
                        $('#search_name').click(function () {
                            var name = $('#place').val();
                            placeSearch.search(name);
                        });
                        AMap.event.addListener(autocomplete, 'select', function(e){
                            //TODO 针对选中的poi实现自己的功能
                            placeSearch.search(e.poi.name)
                        });
                        //点击panel列表的点标记
                        AMap.event.addListener(placeSearch,"listElementClick",function(e) {
                            lng = e.data.location.lng;
                            lat = e.data.location.lat;
                            address = e.data.address;
                            adname = e.data.adname;
                            cityname = e.data.cityname;
                            pname = e.data.pname;
                        });
                        AMap.event.addListener(placeSearch, "markerClick", function(e){
                            lng = e.data.location.lng;
                            lat = e.data.location.lat;
                            address = e.data.address;
                            adname = e.data.adname;
                            cityname = e.data.cityname;
                            pname = e.data.pname;
                        });
                    })
                }
            });
        });
    })
    $(function () {
		$('#province').trigger('change');
        $("#form_btn").click(function () {
            $("#form").ajaxSubmit(function (txt) {
                if (txt.code == 1) {
                    tishi('success', txt.msg, '{:url("index")}');
                } else {
                    tishi('error', txt.msg);
                }
            });
        });
    });
</script>



{/block}
{block name="style"}
{volist name="set_style" id="s"}<link rel="stylesheet" href="{$s}" />{/volist}
{volist name="plugin_item_css" id="s"}<link rel="stylesheet" href="{$s}" />{/volist}
{/block}
{block name="script"}
{volist name="set_script" id="s"}<script type="text/javascript" src="{$s}"></script>{/volist}
{volist name="plugin_item_js" id="s"}<script type="text/javascript" src="{$s}"></script>{/volist}
<script>
	function findinput() {
		var focusinput = $(":focus").focus();
		var nextinput = $(focusinput).parent().parent().nextAll().find("input[type='text']");
		if (nextinput.length > 0) {
			nextinput[0].focus();
		}
	}

	function closelayer() {
		var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
		parent.layer.close(index);
	}
</script>
{/block}